<template>
  <div class="container">
    <el-row :gutter="20">
      <!--增加科室-->
      <el-col :span="8">
        <span class="title">增加科室</span>
        <div>
          <el-input class="add_input" size="mini" v-model="add_ziInput" @keyup.enter.native="search"
                    placeholder="子科室"></el-input>
          <el-input class="add_input" size="mini" v-show="isShow1" v-model="add_fuInput" placeholder="父科室"></el-input>
          <el-select class="add_input" size="mini" filterable v-show="isShow2" v-model="add_value" placeholder="父科室">
            <el-option
              v-for="item in add_options"
              :key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
          <el-button type="primary" size="mini" icon="el-icon-check" v-show="ShowButton1" circle @click="search"></el-button>
          <el-button type="primary" size="mini" v-show="ShowButton2" @click="search1">主要按钮</el-button>
        </div>
      </el-col>
      <!--删除科室-->
      <el-col :span="8">
        <span class="title">删除科室</span>
        <div>
          <el-select class="add_input" filterable size="mini" v-model="del_fatherDepartmenter" @change='father1'
                     placeholder="父科室">
            <el-option
              v-for="item in add_options"
              :key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
          <el-select class="add_input" filterable size="mini" v-model="del_sonDepartmenter" placeholder="子科室">
            <el-option
              v-for="item in add_optionss"
              :key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
          <el-button type="danger" size="mini" @click="del_departmenter">删除</el-button>
        </div>
      </el-col>
      <!--修改科室-->
      <el-col :span="8">
        <span class="title">修改科室</span>
        <div>
          <el-select class="add_input" filterable size="mini" style="ime-mode:disabled"
                     v-model="change_fatherDepartmenter" @change='father2' placeholder="父科室">
            <el-option
              v-for="item in add_options"
              :key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
          <el-select class="add_input" filterable size="mini" v-model="change_sonDepartmenter" @change='father3'
                     placeholder="子科室">
            <el-option
              v-for="item in add_optionss1"
              :key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
          <el-button type="primary" size="mini" @click="change_departmenter">修改</el-button>
        </div>
        <div>
          <el-input class="add_input" :disabled="disabledInput" v-model="change_fatherDepartmenters" v-show="showInput1"
                    size="mini" placeholder="父科室"></el-input>
          <el-input class="add_input" v-model="change_sonDepartmenters" v-show="showInput2" size="mini"
                    placeholder="子科室"></el-input>
        </div>
      </el-col>
    </el-row>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteAffirm">确 定</el-button>
            </span>
    </el-dialog>
    <!-- 修改提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible2" width="300px" center>
      <div class="del-dialog-cnt">是否确定修改？</div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="change_departmenters">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        /*科室*/
        add_options: [],
        add_optionss: [],
        add_optionss1: [],
        /*增加科室*/
        add_ziInput: '',
        add_value: '',
        add_fuInput: '',
        isShow1: false,
        isShow2: false,
        ShowButton1: true,
        ShowButton2: false,
        /*删除科室*/
        delVisible: false,
        del_fatherDepartmenter: '',
        del_sonDepartmenter: '',
        /*修改科室*/
        delVisible2: false,
        change_fatherDepartmenter: '',
        change_fatherDepartmenters: '',
        change_sonDepartmenter: '',
        change_sonDepartmenters: '',
        showInput1: false,
        showInput2: false,
        disabledInput: true,
      }
    },
    watch: {
      /*增加科室*/
      add_ziInput() {
        if (this.add_ziInput == '') {
          this.ShowButton1 = true;
          this.ShowButton2 = false;
          this.isShow1 = false;
          this.isShow2 = false;
          this.add_fuInput = '';
          this.add_value = '';
        }
      }
    },
    created() {
      /*获取父科室*/
      this.fatherDepartmenter(this.$com.Url + '/standard/department/parentDepartment');
    },
    methods: {
      /*增加科室*/
      search() {
        if (this.excludeSpecial(this.add_ziInput)) {
          let add_ziInput = {
            sonDeptName: this.add_ziInput
          };
          this.sonDepartmenter(this.$com.Url + '/standard/department/verdictSon', add_ziInput)
        }
      },
      sonDepartmenter(Url, data) {
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          url: Url,
          data: JSON.stringify(data),
        }).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data == 'true') {
              this.isShow1 = false;
              this.isShow2 = true;
              this.ShowButton1 = false;
              this.ShowButton2 = true;
            } else {
              this.isShow1 = true;
              this.isShow2 = false;
              this.ShowButton1 = false;
              this.ShowButton2 = true;
            }
          }
        })
      },
      search1() {
        if (this.add_fuInput) {
          let data = {
            sonDeptName: this.add_ziInput,
            fatherDeptName: this.add_fuInput,
            fatherDeptId: ''
          };
          this.addPOST(this.$com.Url + '/standard/department/AddFaDep', data)
        } else if (this.add_value) {
          let data = {
            sonDeptName: this.add_ziInput,
            fatherDeptName: this.add_value.label,
            fatherDeptId: this.add_value.value
          };
          this.addPOST(this.$com.Url + '/standard/department/AddFaDep', data)
        } else {
          this.$message.warning('父科室不能为空!');
        }
      },
      addPOST(Url, data) {
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          url: Url,
          data: JSON.stringify(data),
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success('添加成功!');
            this.add_ziInput = '';
            this.add_fuInput = '';
            this.add_options = [];
            this.fatherDepartmenter(this.$com.Url + '/standard/department/parentDepartment');
          }
        })
      },
      /*删除科室*/
      father1() {
        if (this.del_fatherDepartmenter) {
          this.del_sonDepartmenter = '';
          this.add_optionss = [];
          let data = {
            fatherDeptId: this.del_fatherDepartmenter.value
          };
          this.del_sonDepartmenter_Post(this.$com.Url + '/standard/department/SonDepNum', data)
        }
      },
      del_sonDepartmenter_Post(Url, data) {
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          url: Url,
          data: JSON.stringify(data),
        }).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data == 'true') {
              this.sonDepartmenter_Post(this.$com.Url + '/standard/department/partDepartment/' + this.del_fatherDepartmenter.value)
            }
          }
        })
      },
      sonDepartmenter_Post(Url) {
        this.$axios({
          method: 'GET',
          url: Url,
        }).then((res) => {
          if (res.data.code == 200) {
            let _this = this;
            for (let data of res.data.data) {
              let obj = {
                id: data.id,
                value: data.sonDeptId,
                label: data.sonDeptName
              };
              _this.add_optionss.push(obj)
            }
          }
        })
      },
      del_departmenter() {
        if (this.del_fatherDepartmenter) {
          if (this.add_optionss.length > 0) {
            if (this.del_sonDepartmenter) {
              this.delVisible = true;
            } else {
              this.$message.warning('子科室不能为空!');
            }
          } else {
            this.delVisible = true;
          }
        } else {
          this.$message.warning('科室不能为空!');
        }
      },
      deleteAffirm() {
        let data = {
          fatherDeptId: '',
          fatherDeptName: '',
          id: '',
          sonDeptName: '',
        };
        if (this.del_sonDepartmenter) {
          data.fatherDeptId = this.del_fatherDepartmenter.value;
          data.fatherDeptName = this.del_fatherDepartmenter.label;
          data.id = this.del_sonDepartmenter.id;
          data.sonDeptName = this.del_sonDepartmenter.label;
        } else {
          data.fatherDeptId = this.del_fatherDepartmenter.value;
          data.fatherDeptName = this.del_fatherDepartmenter.label;
          data.id = '';
          data.sonDeptName = '';
        }
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          url: this.$com.Url + '/standard/department/DelDep',
          data: JSON.stringify(data),
        }).then((res) => {
          if (res.data.code == 200) {
            this.delVisible = false;
            this.$message.success('删除成功!');
            this.del_fatherDepartmenter = '';
            this.del_sonDepartmenter = '';
            this.add_options = [];
            this.fatherDepartmenter(this.$com.Url + '/standard/department/parentDepartment');
          }
        })
      },
      /*修改科室*/
      father2() {
        if (this.change_fatherDepartmenter) {
          this.showInput1 = true;
          this.change_fatherDepartmenters = this.change_fatherDepartmenter.label;
          this.add_optionss1 = [];
          this.change_sonDepartmenter = '';
          this.showInput2 = false;
          this.change_sonDepartmenter_Post(this.$com.Url + '/standard/department/partDepartment/' + this.change_fatherDepartmenter.value)
        }
      },
      change_sonDepartmenter_Post(Url) {
        this.$axios({
          method: 'GET',
          url: Url,
        }).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data.length > 0) {
              this.disabledInput = true;
              let _this = this;
              for (let data of res.data.data) {
                let obj = {
                  id: data.id,
                  value: data.sonDeptId,
                  label: data.sonDeptName
                };
                _this.add_optionss1.push(obj)
              }
            } else {
              this.disabledInput = false;
            }
          }
        })
      },
      father3() {
        if (this.change_sonDepartmenter) {
          this.showInput2 = true;
          this.change_sonDepartmenters = this.change_sonDepartmenter.label;
        }
      },
      change_departmenter() {
        if (this.change_fatherDepartmenters) {
          if (this.add_optionss1.length > 0) {
            if (this.change_sonDepartmenters) {
              this.delVisible2 = true;
            } else {
              this.$message.warning('子科室不能为空!');
            }
          } else {
            this.delVisible2 = true;
          }
        } else {
          this.$message.warning('科室不能为空!');
        }
      },
      change_departmenters() {
        let data = {
          fatherDeptId: '',
          fatherDeptName: '',
          sonDeptId: '',
          sonDeptName: '',
        };
        if (this.change_sonDepartmenter) {
          data.fatherDeptId = this.change_fatherDepartmenter.value;
          data.fatherDeptName = this.change_fatherDepartmenters;
          data.sonDeptId = this.change_sonDepartmenter.value;
          data.sonDeptName = this.change_sonDepartmenters;
        } else {
          data.fatherDeptId = this.change_fatherDepartmenter.value;
          data.fatherDeptName = this.change_fatherDepartmenters;
          data.sonDeptId = '';
          data.sonDeptName = '';
        }
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          url: this.$com.Url + '/standard/department/UpFaDep',
          data: JSON.stringify(data),
        }).then((res) => {
          if (res.data.code == 200) {
            this.delVisible2 = false;
            this.$message.success('修改成功!');
            this.change_fatherDepartmenter = '';
            this.change_sonDepartmenter = '';
            this.showInput1 = false;
            this.showInput2 = false;
            this.add_options = [];
            this.fatherDepartmenter(this.$com.Url + '/standard/department/parentDepartment');
          }
        })
      },
      /*父科室*/
      fatherDepartmenter(Url) {
        this.$axios({
          method: 'GET',
          url: Url,
        }).then((res) => {
          if (res.data.code == 200) {
            let _this = this;
            for (let data of res.data.data) {
              let obj = {
                id: data.id,
                value: data.fatherDeptId,
                label: data.fatherDeptName
              };
              _this.add_options.push(obj)
            }
          }
        })
      },
      /*去除非法字符*/
      excludeSpecial(s) {
        s = s.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\w]/g, '');
        return s;
      }
    },
  }
</script>

<style scoped>
  .container {
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    height: 110px;
  }

  .container .title {
    font-weight: bold;
    font-size: 17px;
    color: #8C8D8E;
  }

  .container .add_input {
    width: 90px;
    padding-top: 10px;
    padding-bottom: 5px;
  }
</style>
